<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>flex+cal</title>
	 <style type="text/css" media="screen">
	.wrap{
		width: 100%;
		border: 2px solid red;
	}
	.left{
		display: flex;
		justify-content:space-around;
		align-items: center;
		width:calc(100% - 30% - 20px);
		height: calc(90vh);
		border: 2px solid green;
				float: left;
}
	.content{
		width: calc(100% / 4 - 50px);
		height: calc(100% - 50px);
		border: 2px solid blue;
		float: left;
		margin-top: calc(200 / 8px)
	}
	.right{
		margin-left: calc(100% - 30% + 20px)
		width:calc(100% - 70% - 50px);
		border: 2px solid black;
		height: calc(90vh);
	}
	</style>
</head>
<body>
<div class="warp">
<div class="left">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
<div class="right">asdfasdfasdf
</div></div>
</body>
</html>